﻿<!doctype html>
<html>
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>  
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/metro/easyui.css">  
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/mobile.css">  
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">  
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>  
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script> 
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.mobile.js"></script> 
   <!-- <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> -->
    <script type="text/javascript">
        function ongo() {
            var ddd = '<div id="p2" class="easyui-navpanel">'
        +'<header>'
            +'<div class="m-toolbar">'
                +'<div class="m-title">Panel2</div>'
                +'<div class="m-left">'
                    +'<a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a>'
                +'</div>'
            +'</div>'
        +'</header>'
        +'<div style="margin:50px 0 0;text-align:center">'
           +' <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$.mobile.back()">Go Back</a>'
        +'</div>'
   + ' </div>';
            $('body').append(ddd);
            $("p2").panel("open").panel("resize").panel("panel");
            var p1 = "#p1";
            var p2 = "#p2";
            $.mobile.nav(p1, p2);
           // $.mobile.panels.push({ panel: p2, animation: _11, direction: _12 });
        }

    </script>
</head>
<body>
 <div id="p1" class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <div class="m-title">Navigation</div>
            </div>
        </header>
        <div style="margin:50px 0 0;text-align:center">
            <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="ongo()">Goto Panel2</a>
        </div>
    </div>
    
</body>    
</html>